<script setup lang="ts">
import { ref } from 'vue'

// 当前孕周数据
const currentWeek = ref(32)
const totalItems = ref(28)
const completedItems = ref(15)
const progressPercent = ref(54)

// 准备阶段数据
const prepStages = ref([
    { name: '早期准备', type: 'early', completed: 10, total: 10 },
    { name: '中期准备', type: 'middle', completed: 5, total: 12 },
    { name: '临产准备', type: 'late', completed: 0, total: 6 }
])

// 选项卡数据
const tabs = ref([
    { name: '妈妈用品', active: true },
    { name: '宝宝用品', active: false },
    { name: '住院证件', active: false }
])

// 妈妈用品数据
const motherItems = ref([
    {
        category: '入院期间',
        completed: 6,
        total: 8,
        items: [
            { name: '孕妇待产裙', quantity: 'x2', checked: true },
            { name: '拖鞋', quantity: 'x1', checked: true },
            { name: '毛巾', quantity: 'x3', checked: true },
            { name: '漱口杯', quantity: 'x1', checked: true },
            { name: '护肤品套装', quantity: 'x1', checked: true },
            { name: '月子牙刷', quantity: 'x2', checked: true },
            { name: '产妇卫生巾', quantity: 'x2包', checked: false },
            { name: '防溢乳垫', quantity: 'x1盒', checked: false }
        ]
    },
    {
        category: '产后恢复',
        completed: 4,
        total: 6,
        items: [
            { name: '收腹带', quantity: 'x1', checked: true },
            { name: '哺乳内衣', quantity: 'x3', checked: true },
            { name: '哺乳衫', quantity: 'x2', checked: true },
            { name: '防溢乳垫', quantity: 'x1盒', checked: true },
            { name: '乳头保护霜', quantity: 'x1', checked: false },
            { name: '吸奶器', quantity: 'x1', checked: false }
        ]
    }
])

// 宝宝用品数据
const babyItems = ref([
    {
        category: '基础用品',
        completed: 3,
        total: 6,
        items: [
            { name: '婴儿衣服', quantity: 'x5套', checked: true },
            { name: '初生帽子', quantity: 'x2', checked: true },
            { name: '婴儿袜子', quantity: 'x3双', checked: true },
            { name: '婴儿抱被', quantity: 'x2', checked: false },
            { name: '尿不湿', quantity: 'x1包', checked: false },
            { name: '婴儿湿巾', quantity: 'x2包', checked: false }
        ]
    },
    {
        category: '洗护用品',
        completed: 2,
        total: 4,
        items: [
            { name: '婴儿洗发水', quantity: 'x1', checked: true },
            { name: '婴儿沐浴露', quantity: 'x1', checked: true },
            { name: '护臀霜', quantity: 'x1', checked: false },
            { name: '婴儿油', quantity: 'x1', checked: false }
        ]
    }
])

// 住院证件数据
const documentItems = ref([
    {
        category: '必备证件',
        completed: 4,
        total: 5,
        items: [
            { name: '身份证', quantity: '夫妻双方', checked: true },
            { name: '结婚证', quantity: 'x1', checked: true },
            { name: '医保卡', quantity: 'x1', checked: true },
            { name: '产检手册', quantity: 'x1', checked: true },
            { name: '出生证明办理资料', quantity: 'x1套', checked: false }
        ]
    },
    {
        category: '其他物品',
        completed: 3,
        total: 4,
        items: [
            { name: '现金/银行卡', quantity: '适量', checked: true },
            { name: '手机与充电器', quantity: 'x1套', checked: true },
            { name: '记录本和笔', quantity: 'x1套', checked: true },
            { name: '备用眼镜', quantity: 'x1', checked: false }
        ]
    }
])

// 当前显示的物品类别
const activeTabIndex = ref(0)
const activeItems = ref(motherItems.value)

// 切换选项卡
const switchTab = (index: number) => {
    activeTabIndex.value = index
    tabs.value.forEach((tab, i) => {
        tab.active = i === index
    })

    // 更新当前显示的物品列表
    if (index === 0) {
        activeItems.value = motherItems.value
    } else if (index === 1) {
        activeItems.value = babyItems.value
    } else {
        activeItems.value = documentItems.value
    }
}

// 切换物品选中状态
const toggleItem = (categoryIndex: number, itemIndex: number) => {
    const item = activeItems.value[categoryIndex].items[itemIndex]
    item.checked = !item.checked

    // 更新分类已完成数量
    updateCategoryCount(categoryIndex)
    // 更新总进度
    updateTotalProgress()
}

// 更新分类已完成数量
const updateCategoryCount = (categoryIndex: number) => {
    const category = activeItems.value[categoryIndex]
    category.completed = category.items.filter((item) => item.checked).length
}

// 更新总进度
const updateTotalProgress = () => {
    let completed = 0
    let total = 0

    // 计算妈妈用品
    motherItems.value.forEach((category) => {
        completed += category.items.filter((item) => item.checked).length
        total += category.items.length
    })

    // 计算宝宝用品
    babyItems.value.forEach((category) => {
        completed += category.items.filter((item) => item.checked).length
        total += category.items.length
    })

    // 计算住院证件
    documentItems.value.forEach((category) => {
        completed += category.items.filter((item) => item.checked).length
        total += category.items.length
    })

    completedItems.value = completed
    totalItems.value = total
    progressPercent.value = Math.floor((completed / total) * 100)
}

// 添加物品
const addItem = (categoryIndex: number) => {
    uni.showToast({
        title: '添加物品功能开发中',
        icon: 'none'
    })
}

// 分享功能
const sharePage = () => {
    uni.showToast({
        title: '分享功能开发中',
        icon: 'none'
    })
}

// 返回上一页
const goBack = () => {
    uni.navigateBack()
}
</script>

<template>
    <view class="hospital-bag">
        <!-- 页面头部 -->
        <view class="header">
            <view class="header-left">
                <text class="back-icon" @click="goBack">
                    <text class="iconfont icon-arrow-left"></text>
                </text>
                <text class="page-title">待产包准备</text>
            </view>
            <view class="header-right">
                <text class="share-icon" @click="sharePage">
                    <text class="iconfont icon-share-alt"></text>
                </text>
            </view>
        </view>

        <!-- 主内容区 -->
        <view class="main-content">
            <!-- 准备进度卡片 -->
            <view class="card">
                <view class="card-title">
                    <text class="iconfont icon-clipboard-check"></text>
                    <text>准备进度</text>
                </view>

                <view class="week-info">
                    <text class="current-week">当前孕周：第{{ currentWeek }}周</text>
                    <text class="suggestion">建议35周前完成</text>
                </view>

                <view class="progress-header">
                    <text class="progress-title">物品准备进度</text>
                    <text class="progress-value">{{ completedItems }}/{{ totalItems }}项</text>
                </view>
                <view class="progress-container">
                    <view class="progress-bar" :style="{ width: progressPercent + '%' }"></view>
                </view>

                <!-- 准备阶段 -->
                <view class="prep-stages">
                    <view v-for="(stage, index) in prepStages" :key="index" class="stage-item">
                        <view :class="['stage-tag', stage.type]">{{ stage.name }}</view>
                        <text class="stage-count">{{ stage.completed }}/{{ stage.total }}项</text>
                    </view>
                </view>
            </view>

            <!-- 待产包清单 -->
            <view class="card">
                <view class="card-title">
                    <text class="iconfont icon-suitcase-medical"></text>
                    <text>待产包清单</text>
                </view>

                <!-- 清单类别选项卡 -->
                <view class="tabs">
                    <view
                        v-for="(tab, index) in tabs"
                        :key="index"
                        :class="['tab', { active: tab.active }]"
                        @tap="switchTab(index)"
                    >
                        {{ tab.name }}
                    </view>
                </view>

                <!-- 物品类别和列表 -->
                <view class="checklist-categories">
                    <view
                        v-for="(category, categoryIndex) in activeItems"
                        :key="categoryIndex"
                        class="checklist-category"
                    >
                        <view class="category-header">
                            <text class="category-name">{{ category.category }}</text>
                            <text class="category-count"
                                >{{ category.completed }}/{{ category.total }}项</text
                            >
                        </view>

                        <!-- 具体物品列表 -->
                        <view
                            v-for="(item, itemIndex) in category.items"
                            :key="itemIndex"
                            class="checklist-item"
                        >
                            <view
                                :class="['checklist-checkbox', { checked: item.checked }]"
                                @tap="toggleItem(categoryIndex, itemIndex)"
                            >
                                <text v-if="item.checked" class="iconfont icon-check"></text>
                            </view>
                            <text :class="['checklist-label', { checked: item.checked }]">{{
                                item.name
                            }}</text>
                            <text class="checklist-quantity">{{ item.quantity }}</text>
                        </view>

                        <!-- 添加物品按钮 -->
                        <view class="add-item-button" @tap="addItem(categoryIndex)">
                            <text class="iconfont icon-plus"></text>
                            <text>添加物品</text>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 待产建议卡片 -->
            <view class="card margin-bottom">
                <view class="card-title">
                    <text class="iconfont icon-lightbulb"></text>
                    <text>准备建议</text>
                </view>

                <view class="advice-section">
                    <text class="advice-title">准备时间建议</text>
                    <text class="advice-content">
                        建议在孕32-35周之间完成待产包准备，既不会太早遗漏物品，也能避免临产时手忙脚乱。可根据三个阶段（早、中、晚期）有序准备。
                    </text>
                </view>
            </view>
        </view>
    </view>
</template>

<style scoped lang="scss">
.hospital-bag {
    background-color: #ffffff;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.header {
    background-color: #ffffff;
    padding: 24rpx 32rpx 16rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2rpx solid #f0f0f0;
}

.header-left {
    display: flex;
    align-items: center;
}

.back-icon {
    margin-right: 16rpx;
    font-size: 36rpx;
}

.page-title {
    font-size: 36rpx;
    font-weight: 500;
}

.share-icon {
    font-size: 36rpx;
    color: #333;
}

.main-content {
    flex: 1;
    padding: 32rpx;
    background-color: #f9f9f9;
    overflow-y: auto;
}

.card {
    background-color: #ffffff;
    border-radius: 24rpx;
    padding: 32rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
    margin-bottom: 32rpx;
}

.card-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 24rpx;
    display: flex;
    align-items: center;
}

.card-title .iconfont {
    margin-right: 16rpx;
    color: #ff9fb5;
}

.week-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8rpx;
    margin-bottom: 16rpx;
}

.current-week {
    font-size: 28rpx;
    color: #333;
}

.suggestion {
    font-size: 28rpx;
    font-weight: 500;
    color: #ff9fb5;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8rpx;
}

.progress-title {
    font-size: 24rpx;
    color: #999;
}

.progress-value {
    font-size: 24rpx;
    font-weight: 500;
}

.progress-container {
    height: 12rpx;
    background-color: #f0f0f0;
    border-radius: 6rpx;
    margin-bottom: 8rpx;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background-color: #ff9fb5;
    border-radius: 6rpx;
}

.prep-stages {
    display: flex;
    margin-top: 32rpx;
}

.stage-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stage-tag {
    display: inline-block;
    padding: 6rpx 16rpx;
    font-size: 24rpx;
    border-radius: 8rpx;
    margin-bottom: 8rpx;
}

.stage-tag.early {
    background-color: #e6f7ff;
    color: #1890ff;
}

.stage-tag.middle {
    background-color: #fff7e6;
    color: #fa8c16;
}

.stage-tag.late {
    background-color: #fff0f5;
    color: #ff85c0;
}

.stage-count {
    font-size: 24rpx;
    color: #666;
    margin-top: 8rpx;
}

.tabs {
    display: flex;
    background-color: #f5f5f5;
    border-radius: 16rpx;
    padding: 8rpx;
    margin-bottom: 32rpx;
}

.tab {
    flex: 1;
    text-align: center;
    padding: 16rpx 0;
    font-size: 28rpx;
    border-radius: 12rpx;
    transition: all 0.2s ease;
}

.tab.active {
    background-color: #fff;
    color: #ff9fb5;
    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}

.category-header {
    font-weight: 600;
    margin-top: 32rpx;
    margin-bottom: 16rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-name {
    font-size: 30rpx;
    color: #333;
}

.category-count {
    font-size: 26rpx;
    color: #666;
}

.checklist-item {
    display: flex;
    padding: 24rpx 0;
    border-bottom: 2rpx solid #f0f0f0;
    align-items: center;
}

.checklist-item:last-child {
    border-bottom: none;
}

.checklist-checkbox {
    margin-right: 24rpx;
    width: 40rpx;
    height: 40rpx;
    border-radius: 8rpx;
    border: 2rpx solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.checklist-checkbox.checked {
    background-color: #ff9fb5;
    border-color: #ff9fb5;
}

.checklist-label {
    flex: 1;
    font-size: 28rpx;
}

.checklist-label.checked {
    text-decoration: line-through;
    color: #999;
}

.checklist-quantity {
    color: #666;
    font-size: 28rpx;
    margin-left: 20rpx;
}

.add-item-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20rpx 0;
    margin-top: 24rpx;
    border: 2rpx dashed #ddd;
    color: #666;
    border-radius: 16rpx;
    font-size: 28rpx;
}

.add-item-button .iconfont {
    margin-right: 12rpx;
}

.advice-section {
    background-color: #e3f2fd;
    padding: 24rpx;
    border-radius: 16rpx;
}

.advice-title {
    font-size: 28rpx;
    font-weight: 500;
    color: #1565c0;
    margin-bottom: 16rpx;
    display: block;
}

.advice-content {
    font-size: 26rpx;
    color: #1976d2;
    line-height: 1.5;
}

.margin-bottom {
    margin-bottom: 48rpx;
}
</style>
